.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.heroBannerLogo {
  max-width: 300px;
}

@media screen and (max-width: 966px) {
  .heroBanner {
    padding: 2rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexContainer {
  display: flex;
}

.promoIcon {
  color: #fff;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
}

.whiteText {
  color: #fff;
  margin: 0;
}

.sectionTitle {
  font-size: 2rem;
}

.sectionTagline {
  font-size: 1.25rem;
}

.sectionAlt {
  background-color: var(--ifm-color-emphasis-100);
}

.sectionSponsor {
  background-image: linear-gradient(90deg, rgb(188, 78, 156), rgb(248, 7, 89));
}

html[data-theme='dark'] .sectionSponsor {
  background-image: linear-gradient(
    90deg,
    rgb(253, 200, 48),
    rgb(243, 115, 53)
  );
}

.sectionSponsorTitle {
  color: var(--ifm-color-gray-0);
}

.sectionSponsorAlt {
  background: linear-gradient(
    135deg,
    rgb(29, 136, 244),
    rgb(252, 67, 128),
    rgb(251, 191, 36)
  );
}

.quote {
  font-size: 1.1rem;
}

.featuresRow {
  margin-top: -2rem;
}

.featuresRow .featuresRowItem {
  padding-top: 2rem;
}

.tweet {
  font-size: 15px;
}

.tweetsSection {
  margin-top: -2rem;
}

.tweetsSection > :global(.col) {
  padding-top: 2rem;
  margin-top: -2rem;
}

.tweetsSection > :global(.col) > * {
  margin-top: 2rem;
}

.tweetMeta,
.tweetMeta:hover {
  color: var(--ifm-color-emphasis-700);
}
